<template>
  <div id="index">
    <el-row type="flex">
      <h3>用户列表</h3>
    </el-row>
    <el-row>
      <el-table
          :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
          style="width: 100%"
          border
          stripe
          :height="150"
          size="mini  "
          empty-text="暂无数据"
      >
        <el-table-column
            prop="id"
            label="编号"
            width="180">
        </el-table-column>
        <el-table-column
            label="姓名"
            width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>姓名: {{ scope.row.name }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
            prop="articles"
            label="文章数量"
            width="180">
        </el-table-column>

        <el-table-column label="操作">
          <template slot="header" slot-scope="scope">
            <el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"/>
          </template>
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="primary"
                @click="articleManage(scope.$index, scope.row)">进入文章管理</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-row>
    <el-row style="margin-top: 10px;">
      <ve-line :data="chartData" width="1000px" height="300px"></ve-line>
    </el-row>

  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      tableData: [],
      search: "",
      chartData: {
        columns: ['name','articles'],
        rows: []
      }
    }
  },
  created() {
    this.findAllArticles();
  },
  methods: {
    findAllArticles() {
      this.$http.get("/article/findAll").then((response)=>{
        let tableData = [];
        let data = response.data.extend.users;
        for(let item in data) {
          let row = {
            id: data[item].id,
            name: data[item].name,
            articles: data[item].articles.length
          };
          tableData.push(row);
          let chartRow = {
            'name': row.name,
            'articles': row.articles
          };
          this.chartData.rows.push(chartRow);
        }
        this.tableData = tableData;
      });
    },
    articleManage(index,row) {
      this.$router.push({path:'/console/article',query: {id: row.id}});
    }
  }

}
</script>

<style scoped>

</style>